<template>
  <div class="user-profile">
    <van-nav-bar
      class="page-navbar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <input type="file" ref="file" hidden accept="image/*" @change="onFileChange">
    <van-cell class="avatar-cell" title="头像" is-link center @click="$refs.file.click()">
      <van-image
        class="avatar"
        round
        fit="cover"
        width="30"
        height="30"
        :src="user.photo"
      />
    </van-cell>
    <van-cell title="昵称"
      :value="user.name"
      is-link
      @click="isEditName=true"
    />
    <van-cell title="性别"
      :value="user.gender === 0? '男':'女'"
      is-link
      @click="isEditGender=true"
    />
    <van-cell title="生日" :value="user.birthday" is-link @click="isEditBirthday=true" />
    <!-- /个人信息 -->

    <van-popup v-model="isEditName" position="bottom" :style="{ height: '100%' }">
      <update-name
      v-if="isEditName"
      @close="isEditName=false"
      :name.sync="user.name"
      ></update-name>
    </van-popup>

    <van-popup v-model="isEditGender" position="bottom">
      <update-gender
      v-if="isEditGender"
      @close="isEditGender=false"
      :gender.sync="user.gender"
      ></update-gender>
    </van-popup>

    <van-popup v-model="isEditBirthday" position="bottom">
      <update-birthday
      v-if="isEditBirthday"
      @close="isEditBirthday=false"
      :birthday.sync="user.birthday"
      ></update-birthday>
    </van-popup>

    <van-popup v-model="isEditPhoto" position="bottom" :style="{ height: '100%',background:'#000' }">
      <update-photo
        :file="file"
        v-if="isEditPhoto"
        @close="isEditPhoto = false"
        @update-photo="user.photo=$event"
      >
      </update-photo>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/apis/user'
import UpdateName from './components/UpdateName'
import UpdateGender from './components/UpdateGender'
import UpdateBirthday from './components/UpdateBirthday'
import UpdatePhoto from './components/UpdatePhoto'
export default {
  name: 'UserProfile',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  data () {
    return {
      user: {},
      isEditName: false,
      isEditGender: false,
      isEditBirthday: false,
      isEditPhoto: false,
      file: ''
    }
  },
  created () {
    this.getUerInfo()
  },
  methods: {
    async getUerInfo () {
      const { data } = await getUserProfile()
      this.user = data.data
    },
    onFileChange () {
      this.isEditPhoto = true
      this.file = this.$refs.file.files[0]
      this.$refs.file.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup{
  background: #f5f7f9
}
</style>
